<template>
  <div class="layout">
    <h2 class="setting-header">
      <strong>消息中心</strong>
    </h2>
    <div class="notice-list">
      <template v-if="noticeData?.length > 0">
        <div class="notice-item"  v-for="item in noticeData" :key="item.id" @click="showAll(item)">
          <div class="notice-title">{{ item.title }}<span class="read-state" v-if="item.state"></span></div>
          <!-- <div class="notice-content">{{ item.content }}</div> -->
          <div class="right-info">
            <div class="time">{{ dayjs(item?.publishTime).format("YYYY-MM-DD hh:mm") }}</div>
            <div class="from"><span>来源：</span>{{item.from}}</div>
          </div>
        </div>
        <!-- <PaginationView
          :total="queryData.total"
          :pageSize="queryData.pageSize"
          :currentPage="queryData.currentPage"
          :pageChoose="isPageChooseBtn"
          :checkedNum="checkedNum"
          :canChoose="false"
          @changeSize="handleSizeChange"  
          @currentChange="handleCurrentChange"
          @changePageChoose="handlePageChoose"
          @invertChoose="handleInvertChoose"
          @refreshList="handleGetFormManageList"
        /> -->
      </template>
      <el-empty v-else description="暂无数据" />

    </div>

    <el-dialog v-model="showAllVisible" title="消息通知" width="800px" class="notice-title">
      <div class="notice-title" >{{ currentNotice.title }}</div>
      <div class="notice-html" v-html="currentNotice.html"></div>
      <div class="bottom-info">
        <div class="from"><span>来源：</span>{{currentNotice.from}}</div>
        <div class="time">{{ dayjs(currentNotice?.publishTime).format("YYYY-MM-DD hh:mm") }}</div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="showAllVisible = false">我知道了</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from "dayjs";

const currentNotice = ref({});
const showAllVisible = ref(false);
const showAll = (row) => {
  showAllVisible.value = true;
  currentNotice.value = row;
  //发送已读

}
const title = ref('用户页面')
console.log(title);

//获取通知数据
const noticeData = ref([
  {
    id: 1,
    title:'【温馨提示】2025春夏学期新生老生看过来（重要！重要！重要！）',
    content:'引言：新学期，新开始！为确保每位同学都能按时完成学习和考试任务，避免对绩点、奖学金、保研及毕业造成影响，小树特此提醒：请大家务必关注“智慧树共享课”公众号并绑定个人学习账号，系统将会智能监测学习进度，对在规定时间内尚未完成学习任务或需补考的同学，提前2天发送学习督促和考试提醒，确保不会错过截止时间！为了帮助大家更好地适应在线学习模式，小树还贴心准备了“学习宝典”，各位已购买证书的同学，大家好：2025年3月4日批次证书制作范围：2025年3月3日23点59分之前购买且已发布成绩（成绩合格）的证书。补充说明：本批次中含原1-2月批次时间范围内收货地址为学校的证书。',
    html: '<p>&nbsp; &nbsp; 近日接报，有不法分子在QQ上假冒智慧树客服，请认准智慧树官方客服：1、在线客服：官方网站及APP点击进入（推荐方式）；2、电话客服：拨打400-829-3579转1（智慧树业务）。&nbsp;</p><p>&nbsp; &nbsp; 不要在非官方途径轻易相信他人的冒充，谨防网络骗术。<span style="font-size: 9pt;">提醒各位学生诚信学习，避免被不法分子钻空子。</span></p><p><span style="font-size: 9pt;">&nbsp; &nbsp; 警示：智慧树客服不会与任何学生进行金钱交易。</span></p>',
    publishTime:'2025-03-01 02:01:00',
    from:"系统",
    state: 0
  },
  {
    id: 2,
    title:'【重要提醒】期末学习考试提醒（已完成考试的同学请忽略）',
    content:'亲爱的同学们：目前已陆续有学校进入考试阶段，在此我们将重要的一些信息和提示为大家做梳理和提醒。（不清楚自己本学期课程学习考试时间及成绩规则的同学请至 知到APP【学习】模块 课程下方的【成绩】入口进行查看或留意本校教务通知）（1）当课程学习时间结束或进入考试阶段后，则意味着学习时间已经截止，所有的线上学习（观看教程视频、提交章测试、观看见面课直播或回放、提交见面课',
    html: '<p data-v-711a9548="" class="title">【温馨提示】2025春夏学期新生老生看过来（重要！重要！重要！）</p>',
    publishTime:'2025-03-01 02:01:00',
    from: "中医概论",
    state: 1
  }
])
</script>

<style scoped lang="scss">
.notice-item{
  padding: $padding-medium;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin-bottom: 12px;
  cursor: pointer;
  display:flex;
  justify-content: space-between;
  .notice-title{
    font-size: 16px;
    color: $black_2;
    font-weight: bold;
    line-height: 1.5;
    position: relative;
    width: calc(100% - 80px);
    .read-state{
      position: absolute;
      left: -8px;
      top: -8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--el-color-danger);
    }
  }
  .notice-content {
    margin-top: 10px;
    font-size: 16px;
    color: $black_2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .right-info{
    margin-left: 15px;
    width: 250px;
    display: flex;
    align-items: center;
    font-size: 14px;
    .from{
      color: $mainColor;
      span{
        color: $black_2;
      }
    }
    .time{
      color: $black_2;
    }
  }
}

.notice-title{
  .notice-title{
    font-size: 20px;
    text-align: center;
    color: $black;
    margin-top: 10px;
  }
  .notice-html{
    margin-top: 20px;
    ::v-deep *{
      font-size: 16px !important;
      line-height: 1.5 !important;
    }
  }
  .bottom-info{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 20px;

    .from{
      color: $mainColor;
      span{
        color: $black_2;
      }
    }
    .time{
      color: $black_2;
    }
  }
 
}
</style>